<!DOCTYPE html>
<!--
Copyright 2015 Google Inc. All Rights Reserved.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->

<html>
  <head>
    <title>Web App Install Banner: Basic Prompt Sample</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/samples/styles/main.css">
    <link rel="manifest" href="manifest.json">
    <script> 
    window.addEventListener('load', function() {

      var outputElement = document.getElementById('output');

      navigator.serviceWorker.register('service-worker.js', { scope: './' })
        .then(function(r) {
          console.log('registered service worker');
        })
        .catch(function(whut) {
          console.error('uh oh... ');
          console.error(whut);
        });
       
      window.addEventListener('beforeinstallprompt', function(e) {
        outputElement.textContent = 'beforeinstallprompt Event fired';
      });
    });
    </script>
  </head>
  <body>
    <h1>Web App Install Banner: Basic Prompt Sample</h1>

    <p>Available in <a href="https://www.chromestatus.com/features/4540065577435136">Chrome 42+ (for Android)</a></p>

    <p>The <a href="https://developers.google.com/web/updates/2014/11/Support-for-installable-web-apps-with-webapp-manifest-in-chrome-38-for-Android">web app install banner</a> will prompt the user to add your web app to the users home screen.
    It will only prompt when a number of criteria have been met:
    </p>

    <ul>
      <li>The app uses a <a href="http://www.html5rocks.com/en/tutorials/service-worker/introduction/">service worker</a></li>
      <li>The site is using HTTPS</li>
      <li>The app has a manifest declared</li>
      <li>The manifest has a <code>short_name</code>, 144 pixel icon and a type of 'image/png'</li>
    </ul>

    <p>In this example you will see below a message indicating that the <code>beforeinstallprompt</code> event was fired.</p>

    <pre id="output"></pre>

    <p>To see if this example works, come back in another day and you will see the banner.</p>
    <p>For testing we encourage you to force the banner to appear by setting the chrome://flags/#bypass-app-banner-engagement-checks flag.</p>
  </body>
</html>
